import React from 'react';
import { Link } from 'react-router-dom';
import { Typography, Button, Row, Col, Card, Space } from 'antd';
import { BookOutlined, SmileOutlined, BulbOutlined } from '@ant-design/icons';

const { Title, Paragraph } = Typography;

/**
 * 首页组件
 * 个人网站的欢迎页面，提供主要内容的快速导航。
 */
const Home = () => {
  // 卡片数据
  const cardData = [
    {
      id: 1,
      icon: <BookOutlined style={{ fontSize: '24px', color: '#8b5cf6' }} />,
      title: "我的文章",
      description: "记录技术思考、学习心得和项目总结。",
      link: "/articles",
    },
    {
      id: 2,
      icon: <SmileOutlined style={{ fontSize: '24px', color: '#3b82f6' }} />,
      title: "生活点滴",
      description: "分享日常生活中有趣的瞬间和感悟。",
      link: "/life",
    },
    {
      id: 3,
      icon: <BulbOutlined style={{ fontSize: '24px', color: '#f97316' }} />,
      title: "学习笔记",
      description: "存放课程笔记、阅读摘要和技术备忘。",
      link: "/notes",
    }
  ];

  return (
    <div className="min-h-screen bg-gray-50">
      {/* Hero 区域 */}
      <div className="relative h-[50vh] min-h-[400px] overflow-hidden">
        <div className="absolute inset-0 bg-cover bg-center bg-[url('https://images.unsplash.com/photo-1488190211105-8b0e65b80b4e?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=2070&q=80')]"></div>
        <div className="absolute inset-0 bg-black/60"></div>
        <div className="container mx-auto px-6 h-full flex items-center relative z-10">
          <div className="max-w-3xl animate-fadeIn">
            <Title level={1} style={{ color: 'black', marginBottom: '16px', fontSize: '2.5rem' }}>
              欢迎来到我的空间
            </Title>
            <Paragraph style={{ color: 'black', fontSize: '1.125rem', marginBottom: '24px' }}>
              这里是我记录学习、分享生活的地方。
            </Paragraph>
            <Space size="middle">
              <Button type="primary" size="large" shape="round" style={{ background: '#3b82f6' }}>
                <Link to="/articles">开始阅读</Link>
              </Button>
              <Button ghost size="large" shape="round" style={{ borderColor: '#114F64', color: '#628C99' }}>
                <Link to="/about">关于我</Link>
              </Button>
            </Space>
          </div>
        </div>
        
        {/* 波浪装饰 */}
        <div className="absolute bottom-0 left-0 right-0">
          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 320" className="w-full">
            <path fill="#f8fafc" fillOpacity="1" d="M0,96L48,112C96,128,192,160,288,160C384,160,480,128,576,117.3C672,107,768,117,864,128C960,139,1056,149,1152,144C1248,139,1344,117,1392,106.7L1440,96L1440,320L1392,320C1344,320,1248,320,1152,320C1056,320,960,320,864,320C768,320,672,320,576,320C480,320,384,320,288,320C192,320,96,320,48,320L0,320Z"></path>
          </svg>
        </div>
      </div>

      {/* 卡片区域 */}
      <div className="bg-gray-50">
        <div className="container mx-auto px-6 py-16">
          <Title level={2} className="text-center" style={{ margin: '20px 0 20px 0' }}>
            <span className="text-gradient text-gradient-purple">内容</span> 速览
          </Title>
          
          <Row gutter={[24, 24]}>
            {cardData.map((card) => (
              <Col xs={24} md={8} key={card.id}>
                <Card 
                  hoverable 
                  className="h-full"
                  style={{ height: '100%' }}
                  bodyStyle={{ height: '100%', display: 'flex', flexDirection: 'column' }}
                >
                  <div style={{ marginBottom: '16px' }}>
                    {card.icon}
                  </div>
                  <Title level={4} style={{ marginTop: 0 }}>{card.title}</Title>
                  <Paragraph style={{ marginBottom: '16px', flex: 1 }}>
                    {card.description}
                  </Paragraph>
                  <Link to={card.link} style={{ color: '#6366f1', fontWeight: 500 }}>
                    查看更多 →
                  </Link>
                </Card>
              </Col>
            ))}
          </Row>
        </div>
      </div>
      
      {/* 底部区域 */}
      <div style={{ background: '#f8fafc', padding: '24px 0', borderTop: '1px solid #e5e7eb' }}>
        <div className="container mx-auto px-6">
          <Paragraph className="text-center" style={{ marginBottom: 0, color: '#6b7280' }}>
            © 版权归作者本人所有
          </Paragraph>
        </div>
      </div>
    </div>
  );
};

export default Home; 